<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速CORS测试</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        .test-box { background: #f8f9fa; padding: 15px; margin: 10px 0; border-radius: 5px; border-left: 4px solid #007bff; }
        .success { border-left-color: #28a745; background: #d4edda; }
        .error { border-left-color: #dc3545; background: #f8d7da; }
        .warning { border-left-color: #ffc107; background: #fff3cd; }
        button { background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin: 5px; }
        button:hover { background: #0056b3; }
        pre { background: #e9ecef; padding: 10px; border-radius: 3px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>🚀 快速CORS解决方案测试</h1>
    
    <div class="test-box">
        <h3>基于你的Chrome DevTools截图分析：</h3>
        <p>❌ "Provisional headers are shown" = CORS预检失败</p>
        <p>❌ 红色X标记 = 请求被浏览器阻止</p>
        <p>✅ 解决方案：使用JSONP + CORS代理 + 模拟数据降级</p>
    </div>

    <button onclick="runQuickTest()">🔍 运行快速测试</button>
    <button onclick="clearResults()">🗑️ 清除结果</button>

    <div id="results"></div>

    <div class="test-box warning">
        <h3>💡 推荐解决方案（按优先级）：</h3>
        <ol>
            <li><strong>JSONP方法</strong> - 绕过CORS限制，成功率最高</li>
            <li><strong>CORS代理</strong> - 使用第三方代理服务器</li>
            <li><strong>模拟数据</strong> - 确保页面功能正常</li>
        </ol>
    </div>

    <script>
        const API_URL = 'http://149.88.80.204:8000/api/v1/company-info';
        
        function showResult(message, type = 'info') {
            const resultsDiv = document.getElementById('results');
            const resultDiv = document.createElement('div');
            resultDiv.className = `test-box ${type}`;
            resultDiv.innerHTML = `<pre>${message}</pre>`;
            resultsDiv.appendChild(resultDiv);
        }

        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }

        function runQuickTest() {
            clearResults();
            showResult('🚀 开始快速CORS测试...\n', 'info');
            
            // 测试1: JSONP
            testJSONP();
            
            // 测试2: CORS代理
            setTimeout(() => testCORSProxy(), 2000);
            
            // 测试3: 模拟数据
            setTimeout(() => testMockData(), 4000);
        }

        function testJSONP() {
            showResult('测试1: JSONP方法\nURL: ' + API_URL + '?callback=testCallback\n', 'info');
            
            const callbackName = 'jsonpTest' + Date.now();
            window[callbackName] = function(data) {
                showResult('✅ JSONP成功！\n响应: ' + JSON.stringify(data).substring(0, 100) + '...\n推荐使用此方法！', 'success');
                cleanup();
            };
            
            const script = document.createElement('script');
            script.src = API_URL + '?callback=' + callbackName;
            script.onerror = function() {
                showResult('❌ JSONP失败\n可能原因: API不支持JSONP或网络问题', 'error');
                cleanup();
            };
            
            setTimeout(() => {
                if (window[callbackName]) {
                    showResult('❌ JSONP超时\n', 'error');
                    cleanup();
                }
            }, 5000);
            
            function cleanup() {
                delete window[callbackName];
                if (script.parentNode) script.parentNode.removeChild(script);
            }
            
            document.head.appendChild(script);
        }

        function testCORSProxy() {
            showResult('测试2: CORS代理方法\n使用 api.allorigins.win 代理\n', 'info');
            
            const proxyUrl = 'https://api.allorigins.win/raw?url=' + encodeURIComponent(API_URL);
            const xhr = new XMLHttpRequest();
            xhr.open('GET', proxyUrl, true);
            xhr.timeout = 5000;
            
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    showResult('✅ CORS代理成功！\n状态: ' + xhr.status + '\n响应: ' + xhr.responseText.substring(0, 100) + '...\n', 'success');
                } else {
                    showResult('❌ CORS代理失败\n状态: ' + xhr.status + '\n错误: ' + xhr.statusText, 'error');
                }
            };
            
            xhr.onerror = function() {
                showResult('❌ CORS代理网络错误\n可能原因: 代理服务不可用', 'error');
            };
            
            xhr.ontimeout = function() {
                showResult('❌ CORS代理超时\n', 'error');
            };
            
            try {
                xhr.send();
            } catch (error) {
                showResult('❌ CORS代理发送失败: ' + error.message, 'error');
            }
        }

        function testMockData() {
            showResult('测试3: 模拟数据方法\n这是最后的备用方案\n', 'info');
            
            const mockData = {
                title: "仓盛海外仓 - 专业物流服务",
                warehouses: [
                    { title: "Tracy仓库 - 美西物流中心" },
                    { title: "芝加哥仓库 - 美中物流枢纽" },
                    { title: "休斯顿仓库 - 美南物流基地" }
                ]
            };
            
            showResult('✅ 模拟数据准备完成！\n数据: ' + JSON.stringify(mockData, null, 2) + '\n\n🎯 推荐方案：\n1. 如果JSONP成功 → 使用JSONP\n2. 如果CORS代理成功 → 使用代理\n3. 如果都失败 → 使用模拟数据', 'success');
        }

        // 页面加载时显示说明
        window.onload = function() {
            showResult('快速CORS测试页面已加载\n点击"运行快速测试"开始测试\n\n基于你的Chrome DevTools截图，这是最有效的解决方案测试。', 'info');
        };
    </script>
</body>
</html>
